<template>
  <div class="main">
    <div
      
      v-bind:class="{ isMobile: mobileFlag, notMobile: !mobileFlag ,containers: !mobileFlag,
        mobileContainers: mobileFlag,}"
    >
      <div class="main-top">
        <div class="flexs" style="width: 30%">
          <div></div>
        </div>
        <div style="flex: 1; text-align: center">
          <div
            style="
              margin-left: 15px;
              font-size: 1.2em;
              word-wrap: break-word;
              width: 60%;
              text-align: center;
            "
          >
            {{ this.title }}
          </div>
          <div
            style="
              width: 60%;
              word-wrap: break-word;
              margin-left: 15px;
              font-size: 0.8em;
              margin-top: 5px;
              color: #6c848e;
              text-align: center;
            "
          >
            {{ this.description }}
          </div>
        </div>
        <div class="flexs" style="width: 30%">
          <div
            style="
              font-size: 2.5em;
              color: #409eff;
              
              font-style: italic;
              
              margin-right:20px
              text-align: center;
              
            "
          >
            {{ this.finalScore+ "/"+this.totalScore }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <el-card
        class="box-card"
        v-for="(question, index) in questionList"
        :key="index"
        style="margin-top: 10px"
      >
        <div style="display: flex; margin-left: 20px">
          <div style="color: #409eff; margin-bottom: 8px; font-size: 18px">
            <div v-if="question.questionType == 'radio'" style="width: 90px">
              {{ index + 1 + ". " + "单选题" }}
            </div>
            <div v-if="question.questionType == 'checkbox'" style="width: 90px">
              {{ index + 1 + ". " + "多选题" }}
            </div>
            <div v-if="question.questionType == 'judge'" style="width: 90px">
              {{ index + 1 + ". " + "判断题" }}
            </div>
            <div v-if="question.questionType == 'text'" style="width: 90px">
              {{ index + 1 + ". " + "填空题" }}
            </div>
            <div v-if="question.questionType == 'texts'" style="width: 90px">
              {{ index + 1 + ". " + "简答题" }}
            </div>
          </div>
          <div style="flex: 1"></div>
          <div style="color: #ffcd41; width: 120px; margin-right: 10%">
            {{ "（分值：" + question.questionScore + "）" }}
          </div>
        </div>
        <div style="font-size: 15px; margin-left: 2em">
          {{ question.content }}
        </div>

        <!-- 单选题 -->
        <el-radio-group
          v-if="question.questionType == 'radio'"
          style="margin-left: 20px"
          v-model="question.userAnswer"
        >
          <!-- <span>{{ index + 1 + "." }}</span> -->
          <div v-for="(option, index) in question.choiceList" :key="index">
            <el-radio
              :label="option.id"
              disabled
              style="margin-top: 10px; margin-left: 1em"
              >{{ question.choiceList[index].content }}
              <span
                class="answer-tip el-icon-check right"
                v-if="option.rightAnswer == true && question.doRight == true"
               
                ></span
              >
              <span
                class="answer-tip el-icon-close wrong"
                v-if="
                  option.id == question.userAnswer && question.doRight == false
                "
                
                ></span
              >
              <!-- <span
                class="answer-tip"
                v-if="option.rightAnswer && question.doRight == false"
                style="color: #41b883"
                >正确答案</span
              > -->
            </el-radio>
          </div>
        </el-radio-group>

        <!-- 多选题 -->
        <div
          v-if="question.questionType == 'checkbox'"
          style="margin-left: 20px"
        >
          <!-- <span>{{ index + 1 + "." }}</span> -->
          <el-checkbox-group
            v-for="(option, index) in question.choiceList"
            :key="index"
            v-model="question.userAnswers"
          >
            <el-checkbox
              :label="option.id"
              disabled
              style="margin-top: 10px; margin-left: 1em"
              >{{ question.choiceList[index].content }}
              <span
                class="answer-tip el-icon-check right"
                v-if="option.doRight"
               
                ></span
              >
              <span
                class="answer-tip el-icon-close wrong"
                v-if="option.doRight == false && question.correct !== ''"
                
                ></span
              >
              <!-- <span
                class="answer-tip"
                v-if="option.rightAnswer && question.doRight == false"
                style="color: #41b883"
                >正确答案</span
              > -->
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 判断题 -->
        <div
          v-if="question.questionType == 'judge'"
          style="margin-top: 10px; margin-left: 2em"
        >
          <el-radio-group v-model="question.userAnswer">
            <el-radio :label="'yes'" disabled> 正确</el-radio>
            <el-radio :label="'no'" disabled style="margin-left: 10px"
              >错误
              <span
                class="answer-tip el-icon-check right"
                v-if="question.doRight == true"
                
                ></span
              >
              <span
                class="answer-tip el-icon-close wrong"
                v-if="question.doRight == false"
               
                ></span
              >
            </el-radio>
          </el-radio-group>
        </div>

        <!-- 填空题 -->
        <div
          v-if="question.questionType == 'text'"
          v-for="(text, index) in question.rowNum"
          :key="index"
          style="margin-left: 2em"
        >
          <el-input
            :disabled="true"
            v-model="question.userAnswer.split('_')[index]"
            style="margin-top: 10px; width: 40%"
          ></el-input>
          <span
            class="answer-tip el-icon-check right"
            v-if="
              question.userAnswer.split('_')[index] ==
              question.correct.split('_')[index]
            "
            
            ></span
          >
          <span
            class="answer-tip el-icon-close wrong"
            v-if="
              question.userAnswer.split('_')[index] !=
              question.correct.split('_')[index]
            "
            
            ></span
          >
        </div>

        <!-- 简答题 -->
        <div v-if="question.questionType == 'texts'" style="margin-left: 2em">
          <el-input
            type="textarea"
            :rows="question.rowNum"
            v-model="question.userAnswer"
            :disabled="true"
            style="margin-top: 10px; width: 96.5%"
          >
          </el-input>
        </div>
        <div class="answer">
          <div style="margin-bottom: 5px">
            本题得分：<span style="color: #409eff">{{
              question.userScore
            }}</span
            ><span style="color: #409eff" v-if="question.userScore == null"
              >未批改</span
            >
          </div>
          <div>
            正确答案：<span
              style="color: #409eff"
              v-if="
                question.questionType == 'radio' ||
                question.questionType == 'checkbox' ||
                question.questionType == 'texts'
              "
              >{{ question.correct }}</span
            >
            <span
              style="color: #409eff"
              v-if="
                question.questionType == 'judge' && question.correct == 'yes'
              "
              >正确</span
            >
            <span
              style="color: #409eff"
              v-if="
                question.questionType == 'judge' && question.correct == 'no'
              "
              >错误</span
            >
            <span
              style="color: #409eff"
              v-if="question.questionType == 'text'"
              >{{ question.correct.split("_").join(" ") }}</span
            >
            <span style="color: #409eff" v-if="question.correct == ''">
              暂无数据
            </span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      answerId: null,
      info: null,
      mobileFlag: false,
      title: "标题",
      description: "描述",
      questionList: [],
      totalScore: "100",
      answerData: null,
      teacherSee: "student",
      finalScore:"0",
    };
  },
  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    this.mobileFlag = flag;
    // this.questionList=sessionStorage.getItem('test');
    console.log(flag);
    console.log(this.mobileFlag);
    this.answerId = this.$route.query.id;
    this.teacherSee = this.$route.query.teacherSee;
    const _this = this;

    axios
      .get(
        _this.APIurl.apiUrl.domainName +
          "/examPaperAnswer/queryExamResult/" +
          _this.answerId+"/"+_this.teacherSee
      )
      .then(function (response) {
        if(response.data.code==0){
          console.log(response.data.msg);
          _this.$router.push({
          path: "/finish",
          query: {
            checkFlag: true,
            msg:response.data.msg,
          }
          });
          
        }else{
          _this.questionList = response.data.data.questionDetailList;
          _this.totalScore=response.data.data.paperScore;
          _this.finalScore=response.data.data.finalScore;
          _this.title=response.data.data.paperName;
          _this.description=response.data.data.description;
        _this.questionList.forEach((question) => {
          if (question.questionType == "radio") {
            question.userAnswer = parseInt(question.userAnswer);
            question.choiceList.forEach((choice) => {
              if (choice.rightAnswer == true) {
                question.correct = choice.content;
              }
            });
          }
          if (question.questionType == "checkbox") {
            // for (let i = 0; i < question.choiceList.length; i++) {
            //   if (question.userAnswer.split("_")[i] == choiceList[i].content &&choiceList[i].rightAnswer) {
            //     _this.$set(choiceList[i],"doRight",true);
            //   }

            // }
            let temp = [];
            question.userAnswer.split("_").forEach((element) => {
              temp.push(parseInt(element));
            });
            _this.$set(question, "userAnswers", temp);

            question.choiceList.forEach((choice, index) => {
              if (choice.rightAnswer == true) {
                question.correct = question.correct + choice.content + " ";
              }

              // console.log("rightA"+choice.rightAnswer)
              // console.log(choice.id)
              // console.log("temp"+temp[index])
              // console.log("parse"+parseInt(question.userAnswer.split("_")[index]))
              if (
                choice.rightAnswer &&
                question.userAnswers.includes(choice.id)
              ) {
                _this.$set(choice, "doRight", true);
              } else if (
                !choice.rightAnswer &&
                question.userAnswers.includes(choice.id)
              ) {
                _this.$set(choice, "doRight", false);
              }
            });
          }
        });

        console.log(_this.questionList);
        }
        
      });
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.right{
  border-radius: 2px;
  background: #41b883;
  color: white;
}
.wrong{
  border-radius: 2px;
  background: red;
  color: white;
}

.answer {
  background: #f1f3f4;
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 15px;
  padding: 5px;

  border-radius: 6px;
}
.containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 2%;
}
.mobile-containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 0px;
  margin-bottom: 2%;
}
.main-top {
  display: flex;
}
.flexs {
  display: flex;
  justify-content: center;
}
.isMobile {
  width: 100%;
  padding: 0px;
}
.notMobile {
  width: 70%;
}
.containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 5%;
}
.answer-tip {
  margin-left: 2em;
}
/* .main :first-child  /deep/ .el-card__body{
    padding-left: 0px;
    padding-right: 0px;
} */
</style>